<template>
  <div class="main">

    <div class="headerbox">
      <div class="header">
        <shopheader></shopheader>
      </div>

      <div class="shopmsg">
        <shopmsg></shopmsg>
      </div>

      <div class="tab">
        <shoptab></shoptab>
      </div>

    </div>

    <div class="bottombox">

      <div class="leftmsg">
        <shopdetail></shopdetail>
      </div>

      <div class="right">

        <div class="header">

          <div class="top">

            <div class="item" :class="activeIndex == index ? 'activeitem' : ''" v-for="item,index in itemlist" :key="index">{{item}}</div>

          </div>

          <div class="screen">
            <div
              @click="screenindex = index"
              class="leftbox"
              :class="{ isactive: screenindex == index }"
              v-for="(item, index) in screenlist"
              :key="index"
            >
              {{ item }}
              <div class="sanjiao" v-if="item == '价格'">
                <div class="topsnjiao"></div>
                <div class="bottomsanjiao"></div>
              </div>
            </div>

            <div class="rightbox">
              <div
                style="width: 0.8325rem;
    height: 0.23rem;background: #EBEBEB;font-family: PingFang SC;
    font-size: 0.12rem;color: #A7ADB8; line-height: 0.28rem;
    padding-left: 0.05rem;
    margin-right: 0.02rem;"
              >
                最低价
              </div>
              ~
              <div
                style="width: 0.8325rem;
    height: 0.23rem;background: #EBEBEB;font-family: PingFang SC;
    font-size: 0.12rem;color: #A7ADB8; line-height: 0.28rem;
    padding-left: 0.05rem;
    margin-left: 0.02rem;"
              >
                最高价
              </div>
              <div class="searchbutton">查询</div>
            </div>
          </div>

        </div>

        <div class="bottom">

          <div class="shopproduct" v-for="item,index in 24" :key="index">
            <shopproduct></shopproduct>
          </div>

        </div>

      </div>

    </div>

    <div class="page-bottom">
      <Bottom></Bottom>
    </div>

  </div>
</template>

<script>
import shopheader from './components/shopheader.vue'
import shopmsg from './components/shopmsg.vue'
import shoptab from './components/shoptab.vue'
import shopdetail from './components/shopdetail.vue'
import shopproduct from './components/shopproduct.vue'
import Bottom from '../../components/bottom'
export default {
  components: {
    shopheader,
    shopmsg,
    shoptab,
    shopdetail,
    shopproduct,
    Bottom
  },

  data () {
    return {
      itemlist: ['全部(87)', 'T恤(23)', '普通外套(16)', '套装(15)', '睡衣（48）'],
      activeIndex: 0,
      screenlist: ['综合', '人气', '最新', '价格'],
      screenindex: 0
    }
  },
  created () {},
  methods: {

  }
}
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: auto;
  background-color: #F5F7F9;
  .headerbox{
    width: 100%;
    height: 1.74rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .header{
      width: 100%;
      height: 0.32rem;
      background-color: #FFFFFF;
    }
    .shopmsg{
      width: 100%;
      height: 1.1rem;
    }
    .tab{
      width: 100%;
      height: 0.32rem;
      background: #EC6C15;
    }
  }
  .bottombox{
    margin: 0.4rem auto;
    width: 12rem;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .leftmsg{
      width: 2.18rem;
      height: 4.08rem;
    }
    .right{
      width: 9.31rem;
      min-height: 5rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      .header{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        border: 0.01rem solid #E8E8E8;
        .top{
          width: 100%;
          height: 0.6rem;
          border-bottom: 1px solid #EC6C15;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .item{
            width: auto;
            height: 0.3rem;
            line-height: 0.3rem;
            text-align: center;
            padding: 0 0.2rem;
            border-right: 1px solid #E8E8E8;
            font-size: 0.14rem;
            color: #666666;
          }
          .activeitem{
            color: #EC6C15;
          }
        }
        .screen {
          font-family: PingFang SC;
          font-size: 0.12rem;
          color: #666666;
          display: flex;
          align-items: center;
          width: 100%;
          height: 0.42rem;
          border: 0.01rem solid #e8e8e8;
          border-top: none;
          .rightbox {
            margin-left: 0.2rem;
            display: flex;
            align-items: center;
            .searchbutton {
              width: 0.61rem;
              height: 0.28rem;
              background: #ec6c15;
              margin-left: 0.0711rem;
              font-family: PingFang SC;
              font-size: 0.12rem;
              color: #ffffff;
              text-align: center;
              line-height: 0.28rem;
              cursor: pointer;
            }
          }
          .leftbox {
            cursor: pointer;
            position: relative;
            height: 0.32rem;
            width: 1rem;
            text-align: center;
            line-height: 0.32rem;
            // background-color: yellow;
            border-right: 0.01rem solid #e8e8e8;
            .sanjiao {
              position: absolute;
              top: 0.01rem;
              right: 0.1rem;
              display: flex;
              flex-direction: column;
              align-items: center;
              .topsnjiao {
                cursor: pointer;
                width: 0;
                height: 0;
                border: 0.08rem solid;
                border-color: transparent transparent #d8d8d8;
              }
              .bottomsanjiao {
                cursor: pointer;
                width: 0;
                height: 0;
                border: 0.08rem solid;
                margin-top: 0.0167rem;
                border-color: #d8d8d8 transparent transparent transparent;
              }
            }
          }
          .isactive {
            color: #ec6c15;
            font-weight: 600;
          }
          .leftbox:last-child {
            border-right: none;
          }
        }
      }
      .bottom{
        padding-bottom: 0.14rem;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .shopproduct{
          margin-top: 0.2rem;
          width: 2.18rem;
          height: 3.1rem;
          background: #FFFFFF;
        }
      }
    }
  }
  .page-bottom {
    width: 100%;
    height: 3.2rem;
    background: #FFFFFF;
  }
}
</style>
